import { Demo1Component } from './demo1/demo1.component';
import { UserDefinedComponent } from './user-defined/user-defined.component';
import { AsyncEventComponent } from './async-event/async-event.component';

export const OverlayConfig = {
  location: 'Overlay',
  description: '遮罩层，基于Material CDK进行封装的提供一种在屏幕上打开浮动面板的服务。',
  description_en: 'Overlay, based on the Material CDK, provides a service for opening a floating panel on the screen.',
  component: [
    {
      demo: Demo1Component,
      codePath: 'showcase/overlay/demo1/demo1.component',
      demoTitle: '默认遮罩',
      demoTitle_en: 'Basic',
      demoDescription: '遮罩服务提供了一套默认的遮罩效果，包括遮罩样式，位置策略和关闭策略。',
      demoDescription_en: 'Overlay service provides a set of default overlay effects, including overlay styles, location strategies, and shutdown strategies.'
    },
    {
      demo: UserDefinedComponent,
      codePath: 'showcase/overlay/user-defined/user-defined.component',
      demoTitle: '自定义',
      demoTitle_en: 'Customise',
      demoDescription: '根据使用场景自定义遮罩效果。',
      demoDescription_en: 'Customise the Overlay effect according to the usage scene.'
    },
    {
      demo: AsyncEventComponent,
      codePath: 'showcase/overlay/async-event/async-event.component',
      demoTitle: '异步事件',
      demoTitle_en: 'Asynchronous Event',
      demoDescription: '配置遮罩层异步打开和关闭。注意：异步执行打开遮罩时，只能在afterOpen回调函数中获取实例。',
      demoDescription_en: 'Configure the Overlay to open and close asynchronously. Note: When you open a Overlay asynchronously, you can only get an instance in afterOpen callback function.'
    }
  ],
  useRule: [],
  useSuggestion: [],
  mApi: [
    {
      name: 'Overlay',
      name_en: 'Overlay',
      event: [
        {
          event: 'open',
          parameter: `--`,
          description: `1. 使用 .open() 方法创建遮罩层，根据使用场景选择参数配置。<br />
          2. Overlay的内容可以是ComponentPortal或者TemplatePortal，了解CDK Portal，请查看Material CDK开发文档 <a href="https://material.angular.io/cdk/portal/overview" target="_blank">https://material.angular.io/cdk/portal/overview</a><br />
          3. OverlayConfig原生配置请查看Material CDK开发文档 <a href="https://material.angular.io/cdk/overlay/overview" target="_blank">https://material.angular.io/cdk/overlay/overview</a>`,
          description_en: `1. Use the .open() method to create a overlay and select a parameter configuration based on the usage scenario.<br />
          2. The content of Overlay can be ComponentPortal or TemplatePortal. For CDK Portal, please see the Material CDK development document<a href="https://material.angular.io/cdk/portal/overview" target="_blank">https://material.angular.io/cdk/portal/overview.</a><br />
          3. For the native configuration of OverlayConfig, please see the Material CDK development document<a href="https://material.angular.io/cdk/overlay/overview" target="_blank">https://material.angular.io/cdk/overlay/overview.</a>`
        },
        {
          event: 'close',
          parameter: `--`,
          description: '使用 .close() 方法关闭遮罩层。',
          description_en: 'Use the .close() method to close the overlay.'
        },
        {
          event: 'attach',
          parameter: `--`,
          description: '异步打开时调用(如：配置数据异步加载等)，配合 extendConfig 中的 beforeOpen 方法使用。',
          description_en: 'Called when asynchronously opened (eg, configuration data asynchronous loading, etc.), used in conjunction with the beforeOpen method in extendConfig.'
        },
        {
          event: 'destroy',
          parameter: `--`,
          description: '异步关闭时调用(如：配置关闭动画、延时关闭等)，配合 extendConfig 中的 beforeClose 方法使用。',
          description_en: 'Called when asynchronously closed (eg, configuration close animation, delayed close, etc.), used in conjunction with the beforeClose method in extendConfig.'
        }
      ]
    },
  ],
};
